<template>
  <view
    class="tip"
    :class="customClass"
    :style="{fontSize:fontSize}"
  >
    <text
      class="tip-text"
      :style="{color:color}"
    >{{text}}</text>
  </view>
</template>

<script>
export default {
  name: 'TipText',
  props: {
    text: String,
    customClass: String,
    color: String,
    size: {
      type: String,
      default: 'small'
    }
  },
  computed: {
    tagsClass () {
      return this.customClass ? 'tags-separator' : ''
    },
    fontSize () {
      let sizes = {
        small: '10px',
        medium: '12px',
        large: '14px'
      }
      return sizes[this.size]
    }
  }
}
</script>

<style lang="less">
.tip {
  display: flex;
  align-items: center;
  padding: 15px 0;
  justify-content: center;
  color: #666;
}
</style>
